<template>
  <div id="country" class="country">
    <h2>
      全球国家馆
      <router-link
        class="more"
        :to="'/country?country_id=' + country[0].country_id"
        >更多<van-icon name="arrow"
      /></router-link>
    </h2>
    <div class="main-pic" id="rightSwip">
      <router-link
        class="country-main"
        :class="{ active: active == index }"
        v-for="(value, index) in country"
        :key="value.country_id"
        :to="'/country?country_id=' + value.country_id"
      >
        <img :src="value.bigsrc" />
      </router-link>
    </div>
    <div class="country-list">
      <div class="country-item">
        <div
          class="country-box"
          v-for="(value, index) in country"
          :key="value.country_id"
        >
          <!-- <a
            :href="
              'http://www.higuang365.com/wap/activity-nationalPavilion-' +
              value.name +
              '.html'
            "
          > -->
          <div @click="active = index">
            <img v-lazy="value.src" />
          </div>

          <!-- </a> -->
        </div>
        <!-- 更多国家馆 -->
        <!-- 
        <div class="country-box">
          <a
            class="more_country"
            href="http://www.higuang365.com/wap/activity-more_country.html"
          >
            <img
              src="http://www.higuang365.com/public/images/common/country/gengduo.png"
            />
          </a>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const data = reactive({
      // active: new Date().getDay(),
      active: 2,
      country: [
        {
          name: "中国",
          country_id: "3",
          src:
            "http://www.higuang365.com/public/images/common/country/zhongguo.png",
          bigsrc:
            "http://www.higuang365.com/public/images/common/country/zhongguomain.jpg",
        },
        {
          name: "意大利",
          country_id: "23",
          src:
            "http://www.higuang365.com/public/images/common/country/yidali.png",
          bigsrc:
            "http://www.higuang365.com/public/images/common/country/yidalimain.jpg",
        },
        {
          name: "阿根廷",
          country_id: "33",
          src:
            "http://www.higuang365.com/public/images/common/country/agenting.png",
          bigsrc:
            "http://www.higuang365.com/public/images/common/country/agentingmain.jpg",
        },
        {
          name: "马来西亚",
          country_id: "26",
          src:
            "http://www.higuang365.com/public/images/common/country/malaixiya.png",
          bigsrc:
            "http://www.higuang365.com/public/images/common/country/malaixiyamain.jpg",
        },
        {
          name: "德国",
          country_id: "24",
          src:
            "http://www.higuang365.com/public/images/common/country/deguo.png",
          bigsrc:
            "http://www.higuang365.com/public/images/common/country/deguomain.jpg",
        },
        {
          name: "澳大利亚",
          country_id: "25",
          src:
            "http://www.higuang365.com/public/images/common/country/aodaliya.png",
          bigsrc:
            "http://www.higuang365.com/public/images/common/country/aodaliyamain.jpg",
        },
        {
          name: "美国",
          country_id: "27",
          src:
            "http://www.higuang365.com/public/images/common/country/meiguo.png",
          bigsrc:
            "http://www.higuang365.com/public/images/common/country/meiguomain.jpg",
        },
        // {
        //   name: "法国",
        // src:"http://www.higuang365.com/public/images/common/country/faguo.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "土耳其",
        //  src:"http://www.higuang365.com/public/images/common/country/tuerqi.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },

        // {
        //   name: "韩国",
        //   src: "http://www.higuang365.com/public/images/common/country/hanguo.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "德国",
        //   src: "http://www.higuang365.com/public/images/common/country/deguo.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "泰国",
        //   src: "http://www.higuang365.com/public/images/common/country/taiguo.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "越南",
        //   src: "http://www.higuang365.com/public/images/common/country/yuenan.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "俄罗斯",
        // src:"http://www.higuang365.com/public/images/common/country/eluosi.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "捷克",
        //   src: "http://www.higuang365.com/public/images/common/country/jieke.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "葡萄牙",
        //   src: "http://www.higuang365.com/public/images/common/country/putaoya.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "菲律宾",
        //   src: "http://www.higuang365.com/public/images/common/country/feilvbin.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "乌克兰",
        //   src: "http://www.higuang365.com/public/images/common/country/wukelan.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
        // {
        //   name: "日本",
        //   src: "http://www.higuang365.com/public/images/common/country/riben.png",
        // bigsrc:"http://www.higuang365.com/public/images/common/country/zhongguomain.jpg"
        // },
      ],
      startX: 0,
    });
    const router = useRouter();
    onMounted(() => {
      const rightSwipDom = document.getElementById("rightSwip");
      if (rightSwipDom) {
        rightSwipDom.addEventListener("touchstart", function(e) {
          e.preventDefault();
          data.startX = e.changedTouches[0].pageX;
        });
        rightSwipDom.addEventListener("touchend", function(e) {
          e.preventDefault();
          if (e.changedTouches.length) {
            let moveEndX = e.changedTouches[0].pageX;
            let X = moveEndX - data.startX;

            if (X > 5 && data.active >= 0) {
              if (data.active == 0) {
                data.active = data.country.length - 1;
                return;
              }
              data.active -= 1;
              return;
            }
            if (X < 0 && data.active + 1 <= data.country.length) {
              if (data.active + 1 == data.country.length) {
                data.active = 0;
                return;
              }
              data.active += 1;
              return;
            }
            if (0 <= X && X <= 10) {
              router.push({
                path: "/country",
                query: { country_id: data.country[data.active].country_id },
              });
            }
          }
        });
      }
    });

    return { ...toRefs(data) };
  },
});
</script>
<style lang="scss" scoped>
#country {
  padding: 0;
  background: transparent;
  h2 {
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: 0.5rem 0;
    position: relative;
    .more {
      font-size: 1rem;
      position: absolute;
      right: 1rem;
      top: 30%;
      font-weight: 500;
      color: #f15e5e;
      letter-spacing: 0px;
    }
  }
  .country-list {
    width: 100%;
    background: #fff;
    // margin-top: -3rem;
  }
  .country-item {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    // margin: 0 1rem;
  }
  .main-pic {
    position: relative;
  }
  .country-main {
    transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
    position: absolute;
    left: 0;
    opacity: 0;
    img {
      border-radius: 1rem 1rem 0 0;
      overflow: hidden;
    }
  }
  .country-main.active {
    position: relative;
    z-index: 10;
    opacity: 1;
  }
  //   .country-box {
  //     min-width: 25%;
  //     margin: 0.2rem;
  //     border-radius: 1rem;
  //     overflow: hidden;
  //   }
  .country-box {
    margin: 1px;
    min-width: calc(100% / 6 - 2px);
    img {
      display: block;
    }
  }
  .more_country {
    display: block;
  }
}
</style>
